<template>
    <div id = "cesiumContainer"></div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import * as Cesium from "cesium";
import CesiumNavigation from "cesium-navigation-es6";
import demo from "../scripts/demo";


onMounted(async () => {
    //初始化Ceiusm viewer
    Cesium.Ion.defaultAccessToken = '';
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
  
    window.viewer = new Cesium.Viewer("cesiumContainer",{
        geocoder:false,//控制右上角第一个位置的查找工具
        homeButton:false,//控制右上角第二个位置的home图标
        sceneModePicker:false,//控制右上角第三个位置的选择视角模式，2d，3d
        baseLayerPicker:false,//控制右上角第四个位置的图层选择器
        navigationHelpButton:false,//控制右上角第五个位置的导航帮助按钮
        animation:false,//控制左下角的动画器件
        timeline:false,//控制下方时间线
        fullscreenButton:false,//右下角全屏按钮
        vrButton:false,//右下角vr按钮
        shouldAnimate: true,//允许动画同步
        infoBox : false, //不显示点击要素之后显示的信息
        // terrainProvider: Cesium.createWorldTerrain({
        //     requestWaterMask : true, // required for water effects
        //     requestVertexNormals : true, // required for terrain lighting
        // }),//世界地形，有起伏
        terrain: Cesium.Terrain.fromWorldTerrain()
    })
    window.viewer._cesiumWidget._creditContainer.style.display="none";//取消版权信息
    // newViewer.scene.globe.depthTestAgainstTerrain = true; //默认为false

    // 开启深度检测
    window.viewer.scene.globe.depthTestAgainstTerrain = true;

    // 保持分辨率尺度与显示器一致
    window.viewer.resolutionScale = window.devicePixelRatio;

    //开启抗锯齿
    window.viewer.scene.postProcessStages.fxaa.enabled = true;

    // 罗盘
    new CesiumNavigation(window.viewer, {
        enableCompass: true,
        enableZoomControls: true
    });
    
    // 加载3dtiles, 
    {
        const url = "" // TODO: 填3dtiles的实际加载地址
        window.tileset = await Cesium.Cesium3DTileset.fromUrl(url, {
            enableCollision: true // 开启碰撞检测，允许物体贴在3dtiles上
        });
        window.viewer.scene.primitives.add(tileset);
        window.viewer.flyTo(tileset);
    }

    // 
    demo();
})

</script>

<style>
#cesiumContainer {
    position:fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
}
</style>